<template>
  <div>
    <!-- 用toRef -->
    <h2>{{data}}</h2>
    <h2>{{name}}今年{{age}}岁了</h2>
    <button @click="name+='y'">改名了</button>
    <button @click="age++">长大了</button>
    <h2>工作是{{job.jobName}},工资{{job.salary}}K</h2>
    <button @click="job.jobName+='高级'">升职</button>
    <button @click="job.salary++">涨工资</button>
    <h2>当前记数： {{x}}</h2>
    <button @click="x++">电我+1</button>
  </div>
</template>

<script>
import { ref, reactive, toRef, toRefs, readonly, shallowReadonly} from 'vue';
export default {
  name: 'Demo',
  setup(){
    let data = reactive({
      name: "rock",
      age: 18,
      job: {
        jobName: "前端工程师",
        salary: 10
      }
    })
    let x = ref(0)

    // data = readonly(data)  // 不算是第一层还是深层次，都是readonly
    data = shallowReadonly(data)  //第一层readonly， 深层次可修改

    // x = readonly(x)
    // x = shallowReadonly(x)

    return{
      data,
      x,
      ...toRefs(data)  //不能直接toRefs(data)，toRefs(data)是对象，不能返回{对象},需要解构
    }
  },
}
</script>

<style>

</style>
